<template>
  <div>
    <div class='tab-title'>销售额排行榜</div>

    <el-table
      :header-cell-style="{ background: exCss.primaryColor, color: '#fff' }"
      :data='tableData'
      style='width: 100%'
      border
      stripe>
      <el-table-column prop='region' label='所属大区' />
      <el-table-column prop='name' label='人员' />
      <el-table-column prop='target' label='目标销售额' />
      <el-table-column prop='actual' label='实际销售额' />
      <el-table-column label='完成率'>
        <template #default='scope'>
          {{ getRate(scope.row) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import exCss from '@/style/module/primary.module.scss'
import { ref } from 'vue'
import { getMockDataFun } from '@/api/home/index.js'

const tableData = ref([])

onMounted(async () => {
  tableData.value = await getMockDataFun()
})

const getRate = (row) => {
  const completionRate = (row.actual / row.target) * 100
  return completionRate.toFixed(2) + '%'
}
</script>

<style scoped lang='scss'>
.tab-title {
  font-weight: 700;
  color: #33373ebd;
  font-size: 16px;
  margin-bottom: 10px;
}
</style>
